<template>
  <div class="app-container">
    <h2 style="margin: auto; text-align: center">入库申请</h2>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      size="medium"
      label-width="100px"
    >
      <h3>基本信息</h3>
      <el-row>
        <!-- <el-col :span="5">
          <el-form-item label="单据主题">
            <el-input
              v-model="form.title"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="5">
          <el-form-item label="单据编号">
            <el-input
              placeholder="保存自动生成单据编号"
              v-model="form.code"
              clearable
              :style="{ width: '100%' }"
              disabled
            >
            </el-input>
          </el-form-item>
        </el-col>

        <!-- <el-col :span="5">
          <el-form-item label="来源单据">
            <el-input
              v-model="form.source"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item> 
        </el-col>-->
        <el-col :span="5">
          <el-form-item label="库管人员">
            <el-input v-model="form.name" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="申请人员">
            <el-input
              v-model="form.aWName"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="申请时间">
            <el-date-picker
              v-model="form.addTime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="入库类别">
            <el-select
              v-model="form.awType"
              :style="{ width: '100%' }"
              placeholder="请选择入库方式"
            >
              <el-option label="直接入库" value="直接入库"></el-option>
              <el-option label="采购入库" value="采购入库"></el-option>
              <el-option label="调拨入库" value="调拨入库"></el-option>
              <el-option label="生产入库" value="生产入库"></el-option>
              <el-option label="退货入库" value="退货入库"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="5">
          <el-form-item label="供应商名称">
            <el-input
              v-model="form.dilivery"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col> -->
      </el-row>
      <!-- <el-row>
        <el-col :span="18">
          <el-form-item label="备注">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.desc"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row> -->
    </el-form>

    <!-- 入库明细 -->
    <div>
      <div>
        <div>
          <h2>入库明细</h2>
          <el-button size="small" type="primary" @click="addRow"
            >新增</el-button
          >
        </div>
        <!--设置的表单-->
        <el-form :model="studentData" ref="data" label-width="auto">
          <el-table
            border
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
            :data="studentData"
            ref="table"
            style="width: 100%"
          >
            <!-- <el-table-column align="center" label="序号">
              <template slot-scope="scope">-->
            <!--表格里面嵌套表单-->
            <!--<el-form-item
                  :prop="scope.$index + '.ids'"
                  :rules="{
                    required: true,
                    trigger: 'blur',
                  }"
                >
                  <el-input
                    v-model="studentData[scope.$index].ids"
                    autocomplete="off"
                    size="small"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column> -->
            <el-table-column align="center" label="产品名称">
              <template slot-scope="scope">
                <el-form-item
                  :prop="scope.$index + '.spName'"
                  :rules="{
                    required: true,
                    message: '产品名称不能为空',
                    trigger: 'blur',
                  }"
                >
                  <el-input
                    v-model="studentData[scope.$index].spName"
                    autocomplete="off"
                    size="small"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="产品编号">
              <template slot-scope="scope">
                <el-form-item :prop="scope.$index + '.spNumber'">
                  <el-input
                    v-model="studentData[scope.$index].spNumber"
                    autocomplete="off"
                    size="small"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <!-- <el-table-column align="center" label="规格型号">
              <template slot-scope="scope">
                <el-form-item :prop="scope.$index + '.specification'">
                  <el-input
                    v-model="studentData[scope.$index].specification"
                    autocomplete="off"
                    size="small"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column> -->

            <el-table-column align="center" label="单位">
              <template slot-scope="scope">
                <el-form-item :prop="scope.$index + '.spUnit'">
                  <el-input
                    v-model="studentData[scope.$index].spUnit"
                    autocomplete="off"
                    size="small"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="单价">
              <template slot-scope="scope">
                <el-form-item :prop="scope.$index + '.spPrice'">
                  <el-input
                    v-model="studentData[scope.$index].spPrice"
                    autocomplete="off"
                    size="small"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="申请入库数量">
              <template slot-scope="scope">
                <el-form-item
                  :prop="scope.$index + '.spCount'"
                  :rules="{
                    required: true,
                    message: '申请入库数量不能为空',
                    trigger: 'blur',
                  }"
                >
                  <el-input
                    v-model="studentData[scope.$index].spCount"
                    autocomplete="off"
                    size="small"
                    type="number"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="总金额">
              <template slot-scope="scope">
                <el-form-item :prop="scope.$index + '.spSumPrice'">
                  <el-input
                    v-model="studentData[scope.$index].spSumPrice"
                    autocomplete="off"
                    size="small"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <!-- <el-table-column align="center" label="批号">
              <template slot-scope="scope">
                <el-form-item :prop="scope.$index + '.batchNumber'">
                  <el-input
                    v-model="studentData[scope.$index].batchNumber"
                    autocomplete="off"
                    size="small"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column> 
            <el-table-column align="center" label="生产日期">
              <template slot-scope="scope">
                <el-form-item :prop="scope.$index + '.produceDate'">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="studentData[scope.$index].produceDate"
                    autocomplete="off"
                    size="small"
                  ></el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="有效日期">
              <template slot-scope="scope">
                <el-form-item :prop="scope.$index + '.validDate'">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="studentData[scope.$index].validDate"
                    autocomplete="off"
                    size="small"
                  ></el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="到货日期">
              <template slot-scope="scope">
                <el-form-item :prop="scope.$index + '.arrivalDate'">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="studentData[scope.$index].arrivalDate"
                    autocomplete="off"
                    size="small"
                  ></el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="包装方式">
              <template slot-scope="scope">
                <el-form-item
                  :prop="scope.$index + '.packing'"
                  :rules="{
                    required: true,
                    message: '包装方式不能为空',
                    trigger: 'blur',
                  }"
                >
                  <el-input
                    v-model="studentData[scope.$index].packing"
                    autocomplete="off"
                    size="small"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column> 
            <el-table-column align="center" label="备注">
              <template slot-scope="scope">
                <el-form-item :prop="scope.$index + '.remarks'">
                  <el-input
                    v-model="studentData[scope.$index].remarks"
                    autocomplete="off"
                    size="small"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>-->
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  @click="handleDeleteRow(studentData[scope.$index])"
                  size="small"
                  type="danger"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
    </div>
    <div slot="footer">
      <el-button size="small" type="text" @click="cancel">取消</el-button>
      <el-button
        size="small"
        v-loading="formLoading"
        type="primary"
        @click="save"
        >确认</el-button
      >
    </div>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination";
import permission from "@/directive/permission/index.js";
import { cloneDeep } from "lodash";

export default {
  name: "Book",
  components: {
    Pagination,
  },

  directives: {
    permission,
  },
  props: [],
  data() {
    return {
      //新增行
      studentData: [],
      form: {
        id: "",
        code: "",
        name: "张小可",
        aWName: "张三",
        addTime: "2024-06-04",
        awType: "直接入库",
        awCount: 1,
        aWSumPrice: 100,
        warehouseList: [],
      },
      rules: {
        number: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
      },
      list: [],
      totalCount: 0,
      listLoading: true,
      formLoading: false,
      listQuery: {
        Filter: "",
        Sorting: "",
        SkipCount: 0,
        MaxResultCount: 10,
      },
      page: 1,
      multipleSelection: [],
      formTitle: "",
      isEdit: false,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    fetchData(id) {
      this.$axios.gets("/api/business/borrow/" + id).then((response) => {
        this.form = response;
      });
    },
    /**
     * 新增行
     */
    addRow() {
      let index = this.studentData.length;
      this.studentData.push({
        key: index,
        shoppingId: null,
        spName: null,
        spNumber: null,
        spPrice: "",
        spUnit: null,
        spCount: null,
        spSumPrice: null,
        warehouseId: null,
      });
    },

    /**
     * 删除行
     * @param row
     */
    handleDeleteRow(row) {
      let datas = this.studentData;
      for (var i = 0; i < datas.length; i++) {
        if (datas[i].key == row.key) {
          datas.splice(i, 1);
        }
      }
    },

    handleCreate() {
      this.formTitle = "新增入库申请";
      this.isEdit = false;
    },

    findFlow(row) {
      this.$router.push({ path: "/tool/flowDisplay/" + row.nodeId });
    },
    //添加入库申请
    save() {
      //数组与对象转换
      let warehouseList = [];
      this.studentData.forEach((element) => {
        warehouseList.push({
          shoppingId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
          spName: element.spName,
          spNumber: element.spNumber,
          spPrice: element.spPrice,
          spUnit: element.spUnit,
          spCount: element.spCount,
          spSumPrice: element.spSumPrice,
        });
      });
      this.form.warehouseList = warehouseList;

      console.log(this.form);

      this.$refs.form.validate((valid) => {
        if (valid) {
          this.formLoading = true;
          this.form.roleNames = this.checkedRole;
          if (this.isEdit) {
            this.$axios
              .posts("/api/business/Warehouse/data-post", this.form)
              .then((response) => {
                this.formLoading = false;
                this.$notify({
                  title: "成功",
                  message: "更新成功",
                  type: "success",
                  duration: 2000,
                });
                // this.dialogFormVisible = false;
                // this.getList();
              })
              .catch(() => {
                this.formLoading = false;
              });
          } else {
            this.$axios
              .posts("/api/business/Warehouse/data-post", this.form)
              .then((response) => {
                this.formLoading = false;
                this.$notify({
                  title: "成功",
                  message: "新增成功",
                  type: "success",
                  duration: 2000,
                });
                // this.dialogFormVisible = false;
                // this.getList();
              })
              .catch(() => {
                this.formLoading = false;
              });
          }
        }
      });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    cancel() {
      this.form = Object.assign({}, defaultForm);

      //   this.$refs.form.clearValidate();
    },
  },
};
</script>
<style>
</style>
